<template>
  <f7-page name="songsCard" class="backgroundColor" @page:afterin="pageAfterin">
    <f7-navbar class="navbarSongsCard spanColor" title="我的歌单">
      <a href="#" slot="left">
        <f7-button @click="$f7router.back()" style="padding-right:0">
          <svg-icon iconClass="horn_down_white" v-if="getThemeDark" />
          <svg-icon iconClass="horn_down" v-else />
        </f7-button>
      </a>
    </f7-navbar>
    <div class="card_box" ref="cardBox">
      <!-- <f7-card expandable :swipe-to-close="false" id="favCard" @card:beforeopen="handleOpen"
        @card:close="handleClose">
        <f7-card-content :padding="false" class="backgroundColor">
          <div class="bg-color-red" :style="{ height: '16vh' }">
            <f7-card-header text-color="white" class="display-block">
              我喜欢的音乐
              <br />
              <small :style="{ opacity: 0.7 }">2021.06.06</small>
            </f7-card-header>
            <f7-button
              card-close
              color="white"
              class="card-opened-fade-in"
              :style="{ position: 'absolute', right: '15px', top: '15px' }"
            >
              <svg-icon iconClass="cancel_icon_white" />
            </f7-button>
          </div>
          <div class="card-content-padding">
            <v-songCatalog
              :from="'favorite'"
              :tRef="'0'"
              :id="'favorite0'"
              :listHeight="'54vh'"
            />
          </div>
        </f7-card-content>
      </f7-card> -->
      

      <!-- <f7-card
        expandable
        :swipe-to-close="false"
        v-for="(item, index) in songList"
        :key="index"
        @card:beforeopen="handleOpen"
        @card:close="handleClose">
        <f7-card-content :padding="false" class="backgroundColor">
          <div class="bg-color-deeporange" :style="{ height: '16vh' }">
            <f7-card-header text-color="white" class="display-block">
              {{ item.name }}
              <br />
              <small :style="{ opacity: 0.7 }">{{ item.createDate }}</small>
            </f7-card-header>
            <f7-button
              card-close
              color="white"
              class="card-opened-fade-in"
              :style="{ position: 'absolute', right: '15px', top: '15px' }"
            >
              <svg-icon iconClass="cancel_icon_white" />
            </f7-button>
          </div>
          <div class="card-content-padding">
            <v-songCatalog
              :songListId="item.id"
              :from="'songCard'"
              :tRef="index.toString()"
              :id="'songCard' + index"
              :listHeight="'54vh'"
              
            />
            
          </div>
        </f7-card-content>
      </f7-card> -->
      <f7-block>
        <v-sharedSongList :songList="favoriteList" :from="'favorite'" />
        
        <v-sharedSongList :songList="songList" :from="'songCard'"/>
      </f7-block>
    </div>
    <!-- footer -->
    <div class="footer_box">
      <v-playerBar :hasMusicList="getPageGradation===1?true:false" from="songCard"/>
    </div>
  </f7-page>
</template>
<script>
import SongCatalog from '@/components/songcatalog.vue'
import { querySongList } from '@/api/index.js'
import { mapActions, mapGetters } from 'vuex'
import PlayerBar from '@/components/playerbar.vue'
import SharedSongList from '@/components/sharedsonglist.vue'
export default {
  components: {
    'v-songCatalog': SongCatalog,
    'v-playerBar': PlayerBar,
    'v-sharedSongList':SharedSongList,
  },
  computed: {
    ...mapGetters({
      getUserInfo: 'getUserInfo',
      getThemeDark: 'getThemeDark',
      getPageGradation:'getPageGradation',
    }),
  },
  data() {
    return {
      queryData: {
        userId: '',
      },
      songList: [],
      favoriteList:[{
        createDate: "2021-07-25 22:11:19",
        name: "我喜欢的",
        
      }]
    }
  },
  methods: {
    ...mapActions({
      changePageGradation:'changePageGradation',
    }),
    pageAfterin(){
      this.changePageGradation(1);
    },
    getData() {
      this.queryData.userId = this.getUserInfo.userid
      querySongList(this.queryData)
        .then((res) => {
          if (res.code === 200) {
            this.songList = res.data.songLists
          } else {
            console.log(res.code)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    handleOpen(){
      this.$refs.cardBox.style.overflowY = 'initial'
    },
    handleClose(){
      this.$refs.cardBox.style.overflowY = 'scroll'
    },
  },
  mounted() {
    this.getData()
  },
}
</script>
<style lang="scss" scoped>
@import '@/assets/scss/theme.scss';
.light .navbarSongsCard {
  $backgroundColor: #d9e7e7;
  /deep/ .navbar-bg {
    background-color: $backgroundColor;
  }
}
.dark .navbarSongsCard {
  $backgroundColor: #212121;
  /deep/ .navbar-bg {
    background-color: $backgroundColor;
  }
}
.card_box{
  height: calc(84vh - 60px);
  overflow-y: scroll;
}
.footer_box {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index:1000;
}
.navbarSongsCard {
  display: flex;
  align-items: center;
  // height: 9vh;
  background-color: #ffffff;

  /deep/ .navbar-bg::before {
    height: 0 !important;
  }
  /deep/ .title {
    font-size: 18px;
    margin: 0;
  }
  .left {
    width: 12vw;
    .svg-icon {
      width: 0.4rem;
      height: 0.4rem;
    }
  }
  .navbar_m {
    flex: 1;
    width: 72vw;
    margin-left: 1vw;
    span {
      font-size: 18px;
      white-space: nowrap;
    }
    .mText {
      width: 72vw;
      overflow: hidden;
    }
  }
}
.card {
  width: 80vw;
  height: 16vh;
  box-shadow: none;
}
.light {
  $backgroundColor: #d9e7e7;
  /deep/ .card {
    background-color: $backgroundColor;
  }
}
.dark {
  $backgroundColor: #212121;
  /deep/ .card {
    background-color: $backgroundColor;
  }
}
</style>
